<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7.state_basic</title>
</head>
<body>
<div id="app"></div>

<script src="lib/react.development.js"></script>
<script src="lib/react-dom.development.js"></script>
<script src="lib/babel.min.js"></script>

<script type="text/babel">
  class Weather extends React.Component{
      constructor(props) {
          super(props);
          this.state ={isHot: true};

          /*将原型中的函数修改调用者并将更改调用者后的函数作为对象的函数
          * 本质上是一种重写*/
          this.changeWeather =this.changeWeather.bind(this);
      }

      /*这个函数是通过赋值给onClick变量进行间接调用的
      * 但是函数内要使用this.state去控制state
      * 但是函数内部的this是undefined
      * 所以需要：
      *
      *  this.changeWeather =this.changeWeather.bind(this);
      *
      * 去改变函数内部this的指向，使得在函数内可以通过this.state操作类式组件的state属性
      * */
      changeWeather(){
          console.log(this);//undefined
          this.setState({isHot: false})
      }

      render(){
          /*
          * 这里类似于将函数赋值给另外一个变量，最后是通过变量()进行调用
          * */
          return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot? '炎热':'寒冷'}</h1>
      }
  }
      ReactDOM.render(<Weather/>,document.getElementById("app"));
</script>

</body>
</html>